<template>
  <a-drawer
    title="加入费用"
    placement="right"
    :width="width"
    :closable="true"
    :visible="visible"
    :get-container="false"
    :wrap-style="{ position: 'absolute' }"
    :after-visible-change="afterVisibleChange"
    @close="close"
  >
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <div class="box" title="查询区域">
        <a-form layout="inline" @keyup.enter.native="searchQuery" style="margin:18px 10px 10px 10px">
          <a-row :gutter="24">
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="结算单位">

                <a-input v-model="queryDate.settlementCompany" disabled="" v-if="nocpmpany"></a-input>
                <a-select v-model="queryDate.settlementCompany" allowClear showSearch style="width: 100%"
                          placeholder="请选择结算单位" v-else>
                  <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>

              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="客户业务编号">
                <a-input v-model="queryDate.customerNumber" placeholder="客户业务编号"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="费用名称">
                <a-select v-model="queryDate.costName" allowClear showSearch style="width: 100%"
                          placeholder="请选择费用名称">
                  <a-select-option v-for="(item, key) in feeNameData" :key="key" :value="item.value">
                    {{ item.text }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="公司名称">
                <a-input v-model="queryDate.companyName" placeholder="请输入公司名称"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="集装箱号">
                <a-input v-model="queryDate.containerNumber" placeholder="请输入箱号"></a-input>
              </a-form-item>
            </a-col>
            <a-col :xl="6" :lg="7" :md="8" :sm="24">
              <a-form-item label="费用明细币种">
                <j-dict-select-tag type="list" v-model="queryDate.currency"
                                   dictCode="currency"
                                   placeholder="请选择币种" />
              </a-form-item>
            </a-col>
            <a-col :xl="9" :lg="7" :md="8" :sm="24">

              <a-form-item label="业务日期">
                <a-form-item
                  :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }"
                >
                  <a-date-picker format="YYYY-MM-DD" style="width: 100%" @change="onChangeStart" />
                </a-form-item>
                <span :style="{ display: 'inline-block', width: '24px', textAlign: 'center' }">-</span>
                <a-form-item :style="{ display: 'inline-block', width: 'calc(50% - 12px)' }">
                  <a-date-picker format="YYYY-MM-DD" style="width: 100%" @change="onChangeEnd" />
                </a-form-item>
              </a-form-item>
            </a-col>
            <!--          </template>-->
            <a-col :xl="3" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
            </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </div>

    <div style="margin-top: 10px"></div>

    <!-- 查询区域-END -->
    <a-spin :spinning="confirmLoading">
      <a-tabs default-active-key="1">
        <a-tab-pane key="1" tab="应付费用明细">
          <j-vxe-table
            ref="receivableTable"
            row-selection
            resizable
            keep-source
            :loading="confirmLoading"
            :height="350"
            :dataSource="payList"
            :columns="payCol"
            @selectRowChange="handleSelectRowChange"
            :cell-style='cellStyle'
            bordered
          >

          </j-vxe-table>

        </a-tab-pane>
      </a-tabs>
    </a-spin>

    <div style="margin-top: 50px"></div>
    <div
      :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '10px 16px',
          background: '#fff',
          textAlign: 'left',
          zIndex: 999,
        }"
    >
      <a-button :style="{ marginLeft: '8px' }" type="primary" icon="plus" @click="reqClick">
        添加费用
      </a-button>
      <a-button :style="{ marginLeft: '8px' }" @click="close">
        取消
      </a-button>
    </div>
  </a-drawer>
</template>

<script>
import BillForm from '@/views/jzxtrade/modules/BillForm'
import { httpAction, getAction } from '@/api/manage'
import { ajaxGetDictItems } from '@api/api'
import pick from 'lodash.pick'
import { validateDuplicateValue } from '@/utils/util'
import JFormContainer from '@/components/jeecg/JFormContainer'

import { JVXETypes } from '@/components/jeecg/JVxeTable'
import Vue from 'vue'
import { getDictItems } from '../../components/dict/JDictSelectUtil'
import { getDictItemsFromCache } from '../../api/api'
import { deleteAction, postAction } from '../../api/manage'

export default {

  name: 'PayAddFeeTrade',
  components: {
    JFormContainer,
    BillForm,
    VNodes: {
      functional: true,
      render: (h, ctx) => ctx.props.vnodes
    }
  },
  props: {},
  data() {
    return {
      labelCol1: { span: 4 },
      wrapperCol1: { span: 14 },
      queryDate: {
        settlementCompany: '',
        customerNumber: '',
        mainOffNumber: '',
        otherOffNumber: '',
        currency: '',
        costName: '',
        etdStart: '',
        etdEnd: ''

      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 }
      },
      feeNameData: [],
      companyData: [],
      selectfpData: [],
      width: '95%',
      visible: true,
      selectedRowKeys: [],
      isdelete: false,
      payList: [],
      confirmLoading: false,
      nocpmpany: false,
      modelId: '',
      record: {},
      payCol: [
        {
          title: '费用状态',
          key: 'status',
          type: JVXETypes.normal,
          width: '100px',
          defaultValue: '录入状态'
        },
        {
          title: '费用名称',
          key: 'costName',
          type: JVXETypes.normal,
          width: '100px',
          align: 'center'
        },
        {
          title: '结算单位',
          key: 'settlementCompany',
          type: JVXETypes.normal,
          slotName: 'jsdw',
          width: '260px'
        },
        {
          title: '计费单位',
          key: 'chargingUnit',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '币种',
          key: 'currency',
          type: JVXETypes.normal,
          width: '180px'
        },

        {
          title: '单价',
          key: 'price',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '数量',
          key: 'num',
          type: JVXETypes.normal,
          width: '180px'

        },
        {
          title: '汇率',
          key: 'rate',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '总价',
          key: 'totalPrice',
          type: JVXETypes.normal,
          width: '180px'
        },
        {
          title: '本位币金额',
          key: 'cnyAmount',
          type: JVXETypes.normal,
          width: '180px'
        },
        // {
        //   title: '账单号',
        //   key: 'billNumber',
        //   type: JVXETypes.normal,
        //   width: '200px'
        // },
        {
          title: '发票号',
          key: 'invoiceNumber',
          type: JVXETypes.normal,
          width: '200px'
        },
        {
          title: '备注',
          key: 'remark',
          type: JVXETypes.normal,
          width: '200px'
        }
      ],
      url: {
        save: '/box.ship/shipInfo/cost/add',
        queryById: '/box.ship/shipInfo/cost/queryByShipId',
        deleteurl: '/box.ship/shipInfo/cost/del',
        scurl: '/invoice/apply',
        saveurl: '/invoice/save',
        editurl: '/invoice/edit',
        selecturl: '/invoice/query/costinfo'
      },
      receiveCellEdit: true,
      isedit: false,
      // 选择的行
      selectedRows: []
    }
  },
  computed: {},
  created() {
    this.initDict()
  },
  beforeCreate() {
    // this.form = this.$form.createForm(this, { name: 'dynamic_form_item' });
    // this.form.getFieldDecorator('boxType', { initialValue: [], preserve: true });

    // this.form.getFieldDecorator('keys', { initialValue: [], preserve: true });
  },
  methods: {
    requestRecord(val) {
      console.log(val)
      if (val) {
        this.queryDate.settlementCompany = val
        this.nocpmpany = true
      } else {
        this.nocpmpany = false
      }
    },

    selectlist() {
      let param = { id: this.record.id }
      getAction(this.url.selecturl, param).then(res => {
        console.log(res)
        if (res.success) {
          this.payList = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    onChangeStart(time, timestring) {
      this.queryDate.etdStart = timestring
    },
    onChangeEnd(time, timestring) {
      this.queryDate.etdEnd = timestring
    },
    searchQuery() {
      // console.log(this.queryDate)

      this.Allfee = 0
      this.amount = 0
      this.skamount = 0
      this.suffix = ''
      this.rate = 1
      this.$refs.receivableTable.clearSelection()
      this.confirmLoading = true
      getAction('/payapply/query/trade/list', this.queryDate).then(res => {
        if (res.success) {
          // that.$emit('allOk')
          this.payList = res.result
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.confirmLoading = false
      })
    },
    initDict() {
      let param = { isLock: 0, pageSize: 99999 }
      getAction('/fee/list', param).then(res => {
        console.log(res.result.records)
        let feeData = []
        for (let i = 0; i < res.result.records.length; i++) {
          feeData.push({
            value: res.result.records[i].feeName,
            text: res.result.records[i].feeName
          })
        }
        this.feeNameData = feeData
      })
      getAction('/companydata/list', param).then(res => {
        console.log(res.result.records)
        let companyDataList = []
        let selectfpData = []
        for (let i = 0; i < res.result.records.length; i++) {
          companyDataList.push({
            value: res.result.records[i].companyName,
            text: res.result.records[i].companyName
          })
          selectfpData.push({
            value: res.result.records[i].companyName,
            label: res.result.records[i].companyName,
            children: [
              {
                label: '发票信息1',
                value: res.result.records[i].billingInfoOne
              },
              {
                label: '发票信息2',
                value: res.result.records[i].billingInfoTwo
              },
              {
                label: '发票信息3',
                value: res.result.records[i].billingInfoThree
              }
            ]
          })
        }
        this.companyData = companyDataList
        this.selectfpData = selectfpData
      })
    },
    reqClick(val) {
      if (this.selectedRows.length == 0) {
        this.$message.warning('请勾选数据')
      } else {
        this.$emit('selectrow', this.selectedRows)
      }

    },
    // 当选择的行变化时触发的事件
    handleSelectRowChange(event) {
      this.selectedRows = event.selectedRows
      // let allcny = 0
      let allamount = 0
      // this.Allfee = 0
      this.amount = 0
      this.skamount = 0
      this.suffix = ''
      for (let i = 0; i < this.selectedRows.length; i++) {
        // allcny += this.selectedRows[i].cnyAmount
        allamount += this.selectedRows[i].totalPrice
      }
      // this.Allfee = allcny
      this.amount = allamount
      this.skamount = this.amount
      this.changeanount()

    },

    cellStyle(row) {
      // console.log(row.row);
      if (row.row.scode == 2) {//判断条件，如果想要改变其他行样式，就写那一行的下标
        return `background-color: #fff1cf !important;color: #777777`
      } else {
        return `color: #777777`
      }
    },
    changeanount() {
      this.Allfee = parseFloat(this.skamount * this.rate).toFixed(2)

    },
    afterVisibleChange(val) {
      console.log('expenseVisible', val)
    },
    close() {
      this.$emit('close')
      // this.visible = false
    },
    onfpChange(value, selectedOptions) {
      if (value.length > 1) {
        this.billInfo = value[1]
      }

      console.log(value, selectedOptions)
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    }
  }
}

</script>

<style>
#components-layout-demo-basic .ant-layout-sider {
  background: #ffffff;
  color: black;
}

#components-layout-demo-basic .ant-layout-content {
  color: #fff;
}

.ant-drawer-header {
  position: relative;
  padding: 16px 24px;
  color: rgba(0, 0, 0, 0.65);
  background: #fff;
  border-bottom: 1px solid #e8e8e8;
  border-radius: 4px 4px 0 0;
}
</style>

<style scoped>
.box {
  position: relative;
  border: 1px solid #e8e8e8;
}

.box::before {
  content: attr(title);
  position: absolute;
  left: 5%;
  transform: translateX(-50%);
  -webkit-transform: translate(-50%, -50%);
  padding: 0 10px;
  background-color: #fff;
}

/deep/ .ant-form-item {
  margin-bottom: 10px;
}
</style>